<script setup lang="ts">
  const { dictName, color } = defineProps<{
    dictCode?: string | number
    dictName?: string
    color?: string
  }>()

  const tagTypes = ['default', 'error', 'primary', 'info', 'success', 'warning'] as const
  type TagType = (typeof tagTypes)[number]

  const tags = computed<
    Array<{
      text: string
      type?: TagType
      color?: string
    }>
  >(() => {
    const colors = color?.split(',')
    return (
      dictName
        ?.toString()
        .split(',')
        .map((item, index) => {
          const c = colors?.[index]
          return {
            text: item,
            type: c && tagTypes.includes(c as TagType) ? (c as TagType) : undefined,
            color: c && !tagTypes.includes(c as TagType) ? c : undefined
          }
        }) ?? []
    )
  })
</script>

<template>
  <n-space>
    <n-tag
      v-for="tag in tags"
      :key="tag.text"
      :type="tag.type"
      :color="{
        color: tag.color
      }"
      :bordered="false"
      :size="'small'"
    >
      {{ tag.text }}
    </n-tag>
  </n-space>
</template>
